<template>
  <div>
    <DockerTitle titleText="开设处方"></DockerTitle>
    <el-divider />
    <el-table ref="lytable" :data="tableData"> <!--ref 表格绑定对象，用于获取选中行数据-->
      <el-table-column type="selection" width="55" />
      <el-table-column label="药品名称" prop="drugName"></el-table-column>
      <el-table-column label="药品规格" prop="drugFormat"></el-table-column>
      <el-table-column label="单价" prop="drugPrice"></el-table-column>
      <el-table-column label="用法用量">
        <template #default="scope">
          <el-input v-model="scope.row.drugUsage"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="数量">
        <template #default="scope">
          <!-- 输入框绑定数据，min和max为输入框的取值范围，默认为0，min和max可省略-->
          <el-input-number v-model="scope.row.drugNumber" :min="1" :max="10" />
        </template>
      </el-table-column>
      <el-table-column>
        <template #header>
          <el-button size="small" type="primary" @click="dialog.show = true">添加</el-button>
          <el-button size="small" type="danger" @click="delRow">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button style="margin-top: 20px" type="primary" @click="save">保存FormData</el-button>
    <el-button style="margin-top: 20px" type="primary" @click="save2">保存Json</el-button>
    <!-- 控制弹窗的显示状态 -->
    <el-dialog
      v-model="dialog.show"
      title="添加药品"
      width="800px"
      :close-on-click-modal="false"> <!-- 是否允许点击模态背景关闭弹窗，设置为 false 表示不允许 -->
      <!--@addRow 父组件向子组件传值 子组件获取到数据后，通过@addRow事件将数据传给父组件-->
      <DrugList @addRow="addRow" v-if="dialog.show"></DrugList>
    </el-dialog>
  </div>
</template>

<script setup>
import DockerTitle from '@/components/doctor/title'
import { ref, reactive } from 'vue'
import DrugList from './druglist'
import { post } from '@/utils/axios'
import { RegisterStore } from '@/stores/counter' 
import { ElMessage } from "element-plus";
import dayjs from 'dayjs'
import axios from "axios";
import VueCookie from 'vue-cookie' // 引入cookie插件 获取cookie 
const useRegisterStore = RegisterStore()
const register = useRegisterStore.get()
const lytable = ref()
const tableData = ref([])
const dialog = reactive({
  show: false
})
function addRow (row) {
  for (const i in tableData.value) {
    if (row.id === tableData.value[i].id) { // 判断是否已添加
      tableData.value[i].drugNumber++ // 数量加一
      return
    }
  }
  tableData.value.push(row)
}
function delRow () { // 删除表格中选中的行数据
  const rows = lytable.value.getSelectionRows() // 获取表格中选中的行数据
  if (rows.length) {
    for (const i in rows) {
      const id = rows[i].id
      for (const j in tableData.value) {
        if (id === tableData.value[j].id) { // 判断是否已添加
          tableData.value.splice(j, 1) // 删除表格中选中的行数据
          break
        }
      }
    }
  } else {
    ElMessage.error('未选中药品')
  }
}

function save () {  // axios 统一封装了post传formData类型
  const wyform = []
  for (const i in tableData.value) {
    wyform.push({
      registerId: register.value.id,
      drugId: tableData.value[i].id,
      drugUsage: tableData.value[i].drugUsage,
      drugNumber: tableData.value[i].drugNumber,
      creationTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
      drugState: '已开立'
    })
  }
  console.dir(wyform)
  post('/prescription/add1', { content: JSON.stringify(wyform) }, content => {
    console.dir(content)
  })
}
function save2 () {  // 使用axios 传递json 对象 {属性：数组}
  const wyform = []
  for (const i in tableData.value) {
    wyform.push({
      registerId: register.value.id,
      drugId: tableData.value[i].id,
      drugUsage: tableData.value[i].drugUsage,
      drugNumber: tableData.value[i].drugNumber,
      creationTime: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
      drugState: '已开立'
    })
  }
  console.dir(wyform)
  const token = VueCookie.get('token') // 获取token
    if (token) {
      axios.defaults.headers.common['token'] = token
    }
  axios.post('http://127.0.0.1:8080/prescription/add2',{list:wyform}).then(response => {
      if (response.data.code === 200) {
        if (response.data.message) {
          ElMessage.success(response.data.message) //提示信息
        }
      } else {
        ElMessage.error(response.data.message)
        if (response.data.code === 401) { // 登录有问题 返回登录页面
          router.push('/login')
        }
      }
    }).catch(error => {
      console.dir(error)
    }).finally(() => {
      
    })
}
</script>

<style scoped lang="scss">
</style>
